import {
  React, useState, Suspense, useEffect, useLayoutEffect
} from 'react';
import {
  Layout, Menu, Breadcrumb, Avatar, Popover,
  Spin
} from 'antd';
import { UserOutlined } from '@ant-design/icons';
import { Outlet, useNavigate } from 'react-router-dom';
import { Scrollbars } from 'react-custom-scrollbars';
import Notification from '../../components/Notification';
import UserBox from '../../components/User';
import menuConfig from '../../config/menu.config';

import './index.css';
import Logo from './logo.png';

const { Header, Content, Sider } = Layout;

function Main() {
  window.changeUrl = useNavigate();

  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      {/* 全局通知模块 */}
      <Notification />
      <Header
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          height: 50, 
          background: 'rgba(60, 140, 255, 1)',
          padding: '0 10px'
        }}
        className="header"
      >
        <div style={{
          color: '#FFFFFF', fontWeight: '900', fontSize: '18px', lineHeight: '50px' 
        }}
        >
          <img style={{ height: 30, marginTop: '10px' }} src={Logo} alt="logo" /> 
        </div>
        <Popover placement="leftTop" content={<UserBox />} title={`Hello ${window.sessionStorage.nickname || ''}`}>
          <Avatar size="small" style={{ backgroundColor: '#87d068', marginTop: '15px' }}>
            王
          </Avatar>
        </Popover>
      </Header>
      <Content
        className="site-layout-background"
        style={{
          padding: '10px',
          width: '100%',
          height: 'calc(100% - 50px)',
          overflow: 'auto',
          minWidth: '1150px',
          background: 'rgba(248, 251, 255, 1)',
          margin: 0
        }}
      >
        <Suspense fallback={<Spin />}>
          <Outlet />
        </Suspense>
      </Content>
    </div>
    
  );
}

export default Main;
